<template>
  <div id="model_detail">
    <!-- 返回 -->
    <ReturnPage></ReturnPage>
    <!-- 头部信息 -->
    <div class="data_card">
      <div class="title_name" style="margin: 0">
        <div class="icon_box">
          <svg-icon :iconClass="modelData.icon ? modelData.icon : 'icon-question'"></svg-icon>
        </div>
        <div class="name">
          <p>
            {{ modelData.modelName }}
          </p>
          <!-- <span>{{ modelData.}}</span> -->
        </div>
      </div>
      <div class="group">所属分组：{{ modelData.modelCategoryName }}</div>
      <!-- <div class="number">
        是否启用:<span>{{ modelData.isEnable == 0 ? "否" : "是"
        }}<svg-icon class="ml5" iconClass="icon-share"></svg-icon></span>
      </div> -->
      <div class="operate">
        <span @click="showEditModel(modelData)"><svg-icon iconClass="icon-edit"></svg-icon>编辑</span>
        <!-- <span><svg-icon iconClass="icon-import"></svg-icon>导入</span> -->
        <!-- <span><svg-icon iconClass="icon-export"></svg-icon>导出</span>
        <span><svg-icon iconClass="icon-stop"></svg-icon>停用</span> -->

        <el-button v-if="!modelData.modelType" slot="reference" type="text" style="color: #8a8a8a; margin-left: 15px"
          @click="delModel()">
          <i class="el-icon-delete-solid"></i>
          删除
        </el-button>
      </div>
    </div>

    <!-- 选项卡 -->
    <div class="tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 模型字段 -->
        <el-tab-pane label="模型字段" name="first">
          <!-- 功能区 -->
          <div class="operate">
            <el-button type="primary" size="small" plain @click="showAddField">新建字段
            </el-button>
            <el-button type="primary" size="small" @click="showAddGroup" plain>新建分组
            </el-button>
            <!-- <el-button size="small">字段预览</el-button> -->
            <el-input class="mr20" style="width: 200px; float: right" v-model="search" placeholder="请输入字段名称" clearable
              size="small" suffix-icon="el-icon-search" @change="searchList()">
            </el-input>
          </div>

          <!-- 列表 -->
          <div class="field mt10">
            <el-collapse v-model="activeNames">
              <el-collapse-item :name="item.modelFieldCategoryId" v-for="item in data" :key="item.modelFieldCategoryId">
                <template slot="title">
                  {{ item.categoryName }}
                  <span style="font-weight: normal; margin-left: 10px">({{ item.cgModelFields.length }})</span>
                  <el-popover placement="bottom-start" trigger="click">
                    <div class="popover_box" @click="showEditGroup(item)">
                      编辑分组
                    </div>
                    <div class="popover_box" v-if="item.modelFieldCategoryId != '1719994726911987713'"
                      @click="delGroup(item.modelFieldCategoryId)">
                      删除分组
                    </div>
                    <i slot="reference" style="
                        transform: rotate(90deg);
                        margin-left: 10px;
                        color: #9d9ba5;
                      " @click.stop="visible = !visible" class="header-icon el-icon-more"></i>
                  </el-popover>
                </template>
                <div class="item_box">
                  <div class="item" v-for="ele in item.cgModelFields" @click="showModelFieldInfo(ele.modelFieldId)"
                    :key="ele.modelFieldId">
                    <div class="name">
                      <p>
                        {{ ele.comment }}
                      </p>
                      <span>
                        {{ ele.newFieldName }}
                      </span>
                    </div>
                    <div class="icons">
                      <!-- 编辑字段 -->
                      <svg-icon iconClass="icon-edit" style="width: 15px; height: 15px"
                        v-if="ele.modelFieldId != '1719995408821932033'" @click.stop="showEditField(ele)"></svg-icon>
                      <!-- 删除字段 -->

                      <svg-icon @click.native.stop="delField(ele.modelFieldId)" iconClass="icon-trash"
                        v-if="ele.modelFieldId != '1719995408821932033'"
                        style="width: 15px; height: 15px; margin: 0 10px"></svg-icon>
                    </div>
                  </div>
                  <div class="item" @click="showAddField(item.modelFieldCategoryId)">
                    <svg-icon iconClass="icon-add"></svg-icon>
                    添加
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-tab-pane>

        <!-- 模型关联 -->
        <el-tab-pane label="模型关联" name="second">
          <el-button type="primary" size="small" @click="showAddAssociation" plain>新建关系
          </el-button>
          <el-table style="margin-top: 10px; border: 1px solid #dfe6ec" v-loading="loading" :data="relationData"
            :header-cell-style="{ backhround: '#eee' }">
            <el-table-column label="唯一标识" align="center" prop="modelAssociationId"></el-table-column>
            <el-table-column label="源模型" align="center" prop="sourceModelName"></el-table-column>
            <el-table-column label="目标模型" align="center" prop="destModelName"></el-table-column>
            <el-table-column label="关联类型" align="center" prop="modelAssociationName" />
            <el-table-column label="操作 " align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="delRelation(scope.$index, scope.row)">取消关联
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 唯一校验 -->
        <!-- <el-tab-pane label="唯一校验" name="third">
          <el-button type="primary" size="small" plain>新建校验</el-button>
          <el-table style="margin-top: 10px; border: 1px solid #dfe6ec" v-loading="loading" :data="[{ rule: '实例名' }]"
            :header-cell-style="{ backhround: '#eee' }">
            <el-table-column label="校验规则" align="left" prop="rule">
              <template slot-scope="scope">
                <a style="font-size: 13px; color: #9389ff" href="javascript:void(0)">{{ scope.row.rule }}</a>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane> -->
      </el-tabs>
    </div>

    <!-- 新建分组弹框 -->
    <el-dialog title="新增分组" :visible.sync="addGroupFormVisible" @close="closeDialog('addGroupForm')">
      <el-form :model="addGroupForm" :rules="rules" ref="addGroupForm">
        <!-- <el-form-item label="唯一标识" prop="modelFieldUniqueIdentification" label-width="120px">
          <el-input v-model="addGroupForm.modelFieldUniqueIdentification" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item label="分组名称" prop="categoryName" label-width="120px">
          <el-input v-model="addGroupForm.categoryName" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="是否内置" prop="IsBuildIn" label-width="120px">
          <el-radio-group v-model="addGroupForm.IsBuildIn">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="AddGroup('addGroupForm')">确 定
        </el-button>
        <el-button @click="addGroupFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 编辑分组弹框 -->
    <el-dialog title="编辑分组" :visible.sync="editGroupFormVisible">
      <el-form :model="editGroupForm" :rules="rules" ref="editGroupForm">
        <!-- <el-form-item label="模型id" label-width="120px">
          <el-input v-model="editGroupForm.modelId" disabled autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分组id" label-width="120px">
          <el-input v-model="editGroupForm.modelFieldCategoryId" disabled autocomplete="off"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="唯一标识" prop="modelFieldUniqueIdentification" label-width="120px">
          <el-input v-model="editGroupForm.modelFieldUniqueIdentification" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item label="分组名称" prop="categoryName" label-width="120px">
          <el-input v-model="editGroupForm.categoryName" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="是否内置" prop="IsBuildIn" label-width="120px">
          <el-radio-group v-model="editGroupForm.IsBuildIn">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="EditGroup('editGroupForm')">确 定
        </el-button>
        <el-button @click="editGroupFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 新建字段弹框 -->
    <el-dialog title="新增模型字段" :visible.sync="addFieldFormVisible" @close="closeDialog('addFieldForm')">
      <el-form :model="addFieldForm" :rules="rules" ref="addFieldForm">
        <!-- <el-form-item label="模型id" label-width="120px">
          <el-input v-model="addFieldForm.modelId" disabled autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item label="字段名" prop="newFieldName" label-width="120px">
          <el-input v-model="addFieldForm.newFieldName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分组" prop="modelFieldCategoryId" label-width="120px">
          <el-select v-model="addFieldForm.modelFieldCategoryId" placeholder="请选择分组">
            <el-option v-for="ele in data" :key="ele.modelFieldCategoryId" :label="ele.categoryName"
              :value="ele.modelFieldCategoryId"></el-option>
          </el-select>
        </el-form-item>
        <!-- 校验规则 -->
        <el-form-item label="检验规则" prop="testingRegulations" label-width="120px">
          <div @click="addRegulations" class="cls-add">+</div>
          <div v-for="(item, idx) in testingRegulationsJSON" :key="idx" class="cls-flex-col cls-flex-item">
            <div>
              <el-select v-model="item.lable" value-key="type" class="cls-flex-row" placeholder="请选择分组"
                @change="typeChange($event, idx)">
                <el-option v-for="ele in regulations" :key="ele.type" :label="ele.lable" :value="ele"></el-option>
              </el-select>
            </div>
            <!-- 提示 -->
            <div class="cls-flex-row">
              <el-input v-model="item.message"></el-input>
            </div>
            <!-- 触发事件 -->
            <div class="cls-flex-row">
              <el-select v-model="item.trigger" class="cls-flex-row" placeholder="请选择触发事件">
                <el-option label="change" value="change"></el-option>
                <el-option label="blur" value="blur"></el-option>
              </el-select>
            </div>
            <!-- 值 -->
            <div v-if="item.num" class="cls-flex-row">
              <el-input v-model="item.val"></el-input>
            </div>
            <!-- 减少 -->
            <div @click="delReg(idx)" class="cls-add">-</div>
          </div>
        </el-form-item>

        <el-form-item label="注释" prop="comment" label-width="120px">
          <el-input v-model="addFieldForm.comment" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="类型" prop="type" label-width="120px">
          <el-select v-model="addFieldForm.type" placeholder="请选择类型" @change="addRules($event)">
            <el-option label="整型" value="INT"></el-option>
            <el-option label="长整型" value="BIGINT"></el-option>
            <el-option label="字符型" value="VARCHAR"></el-option>
            <el-option label="文本型" value="TEXT"></el-option>
            <el-option label="日期型" value="DATE"></el-option>
            <el-option label="日期时间型" value="DATETIME"></el-option>
          </el-select>
        </el-form-item> -->

        <!-- <el-form-item label="是否必填" prop="isNotNull" label-width="120px">
          <el-radio-group v-model="addFieldForm.isNotNull">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="AddField('addFieldForm')">确 定
        </el-button>
        <el-button @click="addFieldFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 编辑字段弹框 -->
    <el-dialog title="编辑模型字段" :visible.sync="editFieldFormVisible">
      <el-form :model="editFieldForm" :rules="rules" ref="editFieldForm">
        <!-- <el-form-item label="模型id" label-width="120px">
          <el-input v-model="editFieldForm.modelId" disabled autocomplete="off"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="模型字段id" label-width="120px">
          <el-input v-model="editFieldForm.modelFieldId" disabled autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item label="现字段名" prop="oldFieldName" label-width="120px">
          <el-input v-model="editFieldForm.oldFieldName" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="新字段名" prop="newFieldName" label-width="120px">
          <el-input v-model="editFieldForm.newFieldName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="注释" prop="comment" label-width="120px">
          <el-input v-model="editFieldForm.comment" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="类型" prop="type" label-width="120px">
          <el-select v-model="editFieldForm.type" placeholder="请选择类型" @change="addRules($event)">
            <el-option label="整型" value="INT"></el-option>
            <el-option label="长整型" value="BIGINT"></el-option>
            <el-option label="字符型" value="VARCHAR"></el-option>
            <el-option label="文本型" value="TEXT"></el-option>
            <el-option label="日期型" value="DATE"></el-option>
            <el-option label="日期时间型" value="DATETIME"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="分组" prop="modelFieldCategoryId" label-width="120px">
          <el-select v-model="editFieldForm.modelFieldCategoryId" placeholder="请选择分组">
            <el-option v-for="ele in data" :key="ele.modelFieldCategoryId" :label="ele.categoryName"
              :value="ele.modelFieldCategoryId"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="是否必填" prop="isNotNull" label-width="120px">
          <el-radio-group v-model="editFieldForm.isNotNull">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="EditField('editFieldForm')">确 定
        </el-button>
        <el-button @click="editFieldFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 编辑模型弹框 -->
    <el-dialog title="编辑模型" :visible.sync="EditModelVisible">
      <!-- 表单输入 -->
      <el-form :model="editModelForm" :rules="rules" ref="editModelForm" label-width="100px">
        <el-form-item label="模型图标" prop="icon">
          <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
            <IconSelect ref="iconSelect" @selected="selected" :active-icon="editModelForm.icon" />
            <el-input slot="reference" v-model="editModelForm.icon" placeholder="点击选择图标" readonly>
              <svg-icon v-if="editModelForm.icon" slot="prefix" :icon-class="editModelForm.icon" style="width: 25px" />
              <i v-else slot="prefix" class="el-icon-search el-input__icon" />
            </el-input>
          </el-popover>
        </el-form-item>
        <el-form-item label="名称" prop="modelName">
          <el-input v-model="editModelForm.modelName" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="所属分组" prop="modelCategoryId">
          <el-select v-model="editModelForm.modelCategoryId" placeholder="请选择">
            <el-option v-for="item in modelGroupData" :key="item.modelCategoryId" :label="item.categoryName"
              :value="item.modelCategoryId"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="是否启用" prop="isEnable">
          <el-radio-group v-model="editModelForm.isEnable">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="EditModel('editModelForm')">确 定
        </el-button>
        <el-button @click="EditModelVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 字段详情弹框 -->
    <el-dialog title="字段详情" :visible.sync="FieldDetailVisible">
      <el-descriptions>
        <el-descriptions-item label="原字段名称">{{ FieldData.oldFieldName }}
        </el-descriptions-item>
        <el-descriptions-item label="现字段名称">{{ FieldData.newFieldName }}
        </el-descriptions-item>
        <el-descriptions-item label="注释">{{ FieldData.comment }}
        </el-descriptions-item>
        <el-descriptions-item label="字段类型">{{ FieldData.type }}
        </el-descriptions-item>
        <el-descriptions-item label="是否必填">{{ FieldData.isNotNull }}
        </el-descriptions-item>
        <el-descriptions-item label="创建人id">{{ FieldData.userId }}
        </el-descriptions-item>
        <el-descriptions-item label="模型字段id">{{ FieldData.modelFieldId }}
        </el-descriptions-item>
        <el-descriptions-item label="模型字段分组id">{{ FieldData.modelFieldCategoryId }}
        </el-descriptions-item>
        <el-descriptions-item label="模型id">{{ FieldData.modelId }}
        </el-descriptions-item>
        <el-descriptions-item label="添加时间">{{ FieldData.addTime }}
        </el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ FieldData.updateTime }}
        </el-descriptions-item>
        <el-descriptions-item label="删除时间">{{ FieldData.deleteTime }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 新增关系弹窗 -->
    <el-dialog title="新建关系" :visible.sync="newFormVisible" @close="closeDialog('new_form')">
      <el-form :model="new_form" label-width="100px" :rules="rules" ref="new_form">
        <el-form-item label="源模型">
          <el-select v-model="new_form.sourceModelId" filterable disabled>
            <el-option v-for="item in options" :key="item.modelId" :label="item.modelName" :value="item.modelId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目标模型" prop="destModelId">
          <el-select v-model="new_form.destModelId" filterable placeholder="请选择目标模型">
            <el-option v-for="item in options" :key="item.modelId" :label="item.modelName" :value="item.modelId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联类型" prop="modelAssociationTypeId">
          <el-select v-model="new_form.modelAssociationTypeId" filterable placeholder="请选择关联类型">
            <el-option v-for="item in modelAssociationTypeoptions" :key="item.associationTypeUniqueIdentification"
              :label="item.name" :value="item.modelAssociationTypeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="new_form.remarks" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addRelation('new_form')">确 定
        </el-button>
        <el-button @click="newFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import IconSelect from "../../../components/IconSelect";
import {
  getAddModelCategoryGroup_Api,
  getModelIdCategoryList_Api,
  getEditModelCategoryGroup_Api,
  getAddModelField_Api,
  getDelModelCategoryGroup_Api,
  getDelModelField_Api,
  getEditModelField_Api,
  getModelFieldDetail_Api,
  getModelCategorySearchList_Api,
} from "@/api/configuration/resource";
import {
  getModelAssociation_Api,
  getModelDetail_Api,
  getModelCategoryList_Api,
  getEditModel_Api,
  getDelModel_Api,
  getModelList_Api,
  getAssociationTypeList_Api,
  getAddModelAssociation_Api,
  getDelModelAssociation_Api,
} from "@/api/configuration/model";
import Index from "@/views/CentralizedManagement/Event_Management/index.vue";

export default {
  created() {
    // console.log(this.$route.query.id);
  },
  data() {
    return {
      activeName: "first", //选中的tab
      activeNames: [], //字端分组面板
      newFormVisible: false, //新建关系弹框显示隐藏
      FieldDetailVisible: false, //字段详情弹框
      EditModelVisible: false, //编辑模型详情弹框
      addGroupFormVisible: false, //新建分组弹框显示
      editGroupFormVisible: false, //编辑分组弹框显示
      addFieldFormVisible: false, //新增字段弹框显示
      editFieldFormVisible: false, //编辑字段弹框显示
      search: "", //搜索
      loading: false, //表格loading
      FieldData: {}, //字段详情数据
      modelGroupData: [], //模型分组数据
      modelData: {}, //模型详情数据
      editModelForm: {
        modelId: this.$route.query.id,
        modelCategoryId: "", //模型分组Id
        isEnable: 0, //是否启用
        modelName: "", //名称
        modelCategoryName: "", //模型分组名称
        icon: "", //图标路径
      },
      //列表数据
      data: {},
      //验证的所有规则
      regulations: [
        {
          type: "max",
          lable: "最大长度",
          message: "不能超过最大字符长度",
          trigger: "",
          num: true,
          val: 0,
        },
        {
          type: "min",
          lable: "最小长度",
          message: "不能小于最小字符长度",
          trigger: "",
          num: true,
          val: 0,
        },
        {
          type: "number",
          lable: "数字",
          message: "只能输入数字",
          trigger: "",
          num: false,
          val: 0,
        },
        {
          type: "string",
          lable: "字符",
          message: "只能输入字符",
          trigger: "",
          num: false,
          val: 0,
        },
        {
          type: "ip",
          lable: "IP",
          message: "IP格式错误",
          trigger: "",
          num: false,
          val: 0,
        },
        {
          type: "email",
          lable: "Mail",
          message: "邮件格式错误",
          trigger: "",
          num: false,
          val: 0,
        },
        {
          type: "required",
          lable: "是否必填",
          message: "该项为必填项",
          trigger: "",
          num: false,
          val: 0,
        },
      ],
      //模型关联数据
      relationData: [],
      testingRegulationsJSON: [],
      //添加模型字段
      addFieldForm: {
        modelFieldCategoryId: null, //字段分组id
        modelId: null, //模型编号
        newFieldName: "", //字段名,对应数据库列名
        testingRegulations: "", //校验规则
        comment: "", //注释,对应页面展示名称
        type: "TEXT", //类型int 整型 bigint 长整型 varchar 字符型 text 文本型 date 日期型 numdate 数字日期型 datetime 日期时间型',
        length: null, //长度
        isNotNull: 0, //是否必填 * 0:不 * 1:是
        testingRegulationsJSON: "", //字段添加规则
      },
      //编辑模型字段
      editFieldForm: {},
      //新增分组表单
      addGroupForm: {
        modelId: null,
        modelFieldUniqueIdentification: "",
        categoryName: "",
        IsBuildIn: 0,
      },
      //编辑分组表单
      editGroupForm: {
        modelFieldCategoryId: null,
        modelId: null,
        modelFieldUniqueIdentification: "",
        categoryName: "",
        IsBuildIn: null,
      },
      //模型选择菜单
      options: [],
      //关联类型列表
      modelAssociationTypeoptions: [],
      new_form: {
        sourceModelId: null, //源模型id
        destModelId: null, //目标模型id
        modelAssociationTypeId: null, //关联类型id
        remarks: "", //备注
      }, //新建关系表单
      //表单验证
      rules: {
        modelFieldUniqueIdentification: [
          { required: true, message: "请输入唯一标识", trigger: "blur" },
        ],
        categoryName: [
          { required: true, message: "请输入分组名称", trigger: "blur" },
        ],
        newFieldName: [
          { required: true, message: "请输入字段名", trigger: "blur" },
        ],
        comment: [{ required: true, message: "请输入注释", trigger: "blur" }],
        type: [{ required: true, message: "请选择类型", trigger: "blur" }],
        modelFieldCategoryId: [
          { required: true, message: "请选择分组", trigger: "blur" },
        ],
        modelName: [
          { required: true, message: "请输入模型名", trigger: "blur" },
        ],
        modelCategoryName: [
          { required: true, message: "请选择分组", trigger: "change" },
        ],
        IsBuildIn: [
          { required: true, message: "请选择是否内置", trigger: "blur" },
        ],
        isNotNull: [
          { required: true, message: "请选择是否必填", trigger: "blur" },
        ],
        destModelId: [
          { required: true, message: "请选择目标模型", trigger: "blur" },
        ],
        modelAssociationTypeId: [
          { required: true, message: "请选择关联类型", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    //模型字段列表
    this.getList();
    //模型关联列表
    this.getModelAssociationList();
    //模型详情数据
    this.getModelDetail();
    //获取模型分组列表数据
    this.getModelGroupList();
    //获取不分组模型
    this.getModels();
    //获取关联类型
    this.getAssociationTypeList();
  },
  methods: {
    typeChange(selectSelObj, rowIdx) {
      let self = this;
      // self.testingRegulationsJSON[rowIdx] = JSON.parse(JSON.stringify(curSelObj))
      let cur = self.testingRegulationsJSON[rowIdx];
      cur.message = selectSelObj.message;
      cur.type = selectSelObj.type;
      cur.num = selectSelObj.num;
      cur.val = selectSelObj.val;
      cur.trigger = selectSelObj.trigger;
      cur.lable = selectSelObj.lable;
      this.addFieldForm.testingRegulationsJSON = JSON.stringify(
        self.testingRegulationsJSON
      );
      // console.log(self.testingRegulationsJSON[rowIdx])
    },
    delReg(idx) {
      this.testingRegulationsJSON.splice(idx, 1);
    },
    addRegulations() {
      let self = this;
      self.testingRegulationsJSON.push(
        JSON.parse(JSON.stringify(self.regulations[0]))
      );
    },
    // 选择图标
    selected(name) {
      this.editModelForm.icon = name;
    },
    //获取所有模型
    async getModels() {
      let res = await getModelList_Api();
      let { code, data } = res;
      if (code == 200) {
        this.options = data;
      }
    },
    //获取关联类型列表
    async getAssociationTypeList() {
      let res = await getAssociationTypeList_Api();
      let { code, rows } = res;
      if (code == 200) {
        this.modelAssociationTypeoptions = rows;
      }
    },
    //获取模型分组列表数据
    async getModelGroupList() {
      let res = await getModelCategoryList_Api();
      let { code, data } = res;
      if (code == 200) {
        this.modelGroupData = data;
      }
    },
    //获取模型详情
    async getModelDetail() {
      let res = await getModelDetail_Api(this.$route.query.id);
      let { code, data } = res;
      if (code == 200) {
        this.modelData = data;
      }
    },
    //获取模型关联列表
    async getModelAssociationList() {
      let res = await getModelAssociation_Api(this.$route.query.id);
      let { code, rows } = res;
      if (code == 200) {
        this.relationData = rows;
      }
    },
    //获取列表数据
    async getList() {
      let res = await getModelIdCategoryList_Api({
        modelId: this.$route.query.id,
      });
      let { code, data } = res;
      if (code == 200) {
        data.forEach((item) => {
          this.activeNames.push(item.modelFieldCategoryId);
        });

        this.data = data;
      }
    },
    //字段列表查询
    async searchList() {
      let res = await getModelCategorySearchList_Api({
        comment: this.search,
        modelId: this.$route.query.id,
      });
      let { data, code, msg } = res;
      if (code == 200) {
        this.$message.success(msg);
        this.data = data;
      } else {
        this.$message.error(msg);
      }
    },
    //展示字段详情
    async showModelFieldInfo(id) {
      this.FieldDetailVisible = true;
      let res = await getModelFieldDetail_Api(id);
      let { code, data } = res;
      if (code == 200) {
        this.FieldData = data;
      }
    },
    //展示模型编辑弹框
    showEditModel(data) {
      this.EditModelVisible = true;
      this.editModelForm = {
        modelId: this.$route.query.id,
        modelCategoryId: data.modelCategoryId, //模型分组Id
        isEnable: data.isEnable, //是否启用
        modelName: data.modelName, //名称
        modelCategoryName: data.modelCategoryName, //模型分组名称
        icon: data.icon, //图标路径
      };
    },
    //模型编辑
    EditModel(formName) {
      this.modelGroupData.forEach((item) => {
        if (item.modelCategoryId == this.editModelForm.modelCategoryId) {
          this.editModelForm.modelCategoryName = item.categoryName;
        }
      });
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await getEditModel_Api(this.editModelForm);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.getModelDetail();
            this.EditModelVisible = false;
          } else {
            this.$message.error(msg);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //模型删除
    delModel() {
      this.$confirm("此操作将永久删除该模型, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await getDelModel_Api(this.$route.query.id);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.$router.push({
              path: "/configuration/resource/manage",
            });
          } else {
            this.$message.error(msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //展示新建分组弹框
    showAddGroup() {
      this.addGroupFormVisible = true;
      this.addGroupForm = {
        modelId: null,
        modelFieldUniqueIdentification: Date.now(),
        categoryName: "",
        IsBuildIn: 0,
      };
    },
    //添加字段分组
    AddGroup(formName) {
      this.addGroupForm.modelId = this.$route.query.id;
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await getAddModelCategoryGroup_Api(this.addGroupForm);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.addGroupFormVisible = false;
            this.getList();
          } else {
            this.addGroupFormVisible = false;
            this.$message.error(msg);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //展示编辑分组弹框
    showEditGroup(item) {
      this.editGroupForm = {
        modelFieldCategoryId: item.modelFieldCategoryId,
        modelFieldUniqueIdentification: item.uniqueIdentification,
        categoryName: item.categoryName,
        modelId: item.modelId,
        IsBuildIn: item.isBulidIn,
      };
      this.editGroupFormVisible = true;
    },
    //编辑字段分组
    EditGroup(formName) {
      this.editGroupForm.modelId = this.$route.query.id;
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await getEditModelCategoryGroup_Api(this.editGroupForm);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.editGroupFormVisible = false;
            this.getList();
          } else {
            this.editGroupFormVisible = false;
            this.$message.error(msg);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //删除字段分组
    delGroup(id) {
      this.$confirm("此操作将永久删除该分组, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await getDelModelCategoryGroup_Api(id);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.getList();
          } else {
            this.$message.error(msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //展示新建字段弹框
    showAddField(id) {
      this.addFieldForm = {
        modelFieldCategoryId: null, //字段分组id
        modelId: this.$route.query.id, //模型编号
        newFieldName: "", //字段名,对应数据库列名
        comment: "", //注释,对应页面展示名称
        type: "TEXT", //类型int 整型 bigint 长整型 varchar 字符型 text 文本型 date 日期型 numdate 数字日期型 datetime 日期时间型',
        isNotNull: 0, //是否必填 * 0:不 * 1:是
        length: null,
      };
      if (typeof id == "string") {
        this.addFieldForm.modelFieldCategoryId = id; //字段分组id
      } else {
        this.addFieldForm.modelFieldCategoryId = null; //字段分组id
      }
      this.addFieldFormVisible = true;
    },
    //新增模型字段
    AddField(formName) {
      this.$refs[formName].validate(async (valid) => {
        this.addFieldForm.length = this.addFieldForm.newFieldName.length;
        if (valid) {
          this.addFieldForm.testingRegulationsJSON = JSON.stringify(
            this.testingRegulationsJSON
          );
          let res = await getAddModelField_Api(this.addFieldForm);
          let { code, msg } = res;
          if (code == 200) {
            this.addFieldFormVisible = false;
            this.$message.success(msg);
            this.getList();
          } else {
            this.$message.error(msg);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //显示编辑字段
    showEditField(item) {
      // console.log(item);
      this.editFieldForm = {
        modelFieldId: item.modelFieldId,
        modelId: this.$route.query.id, //模型编号
        length: null, //长度
        newFieldName: item.newFieldName,
        oldFieldName: item.newFieldName, //字段名,对应数据库列名
        comment: item.comment, //注释,对应页面展示名称
        type: item.type, //类型int 整型 bigint 长整型 varchar 字符型 text 文本型 date 日期型 numdate 数字日期型 datetime 日期时间型',
        isNotNull: 0, //是否必填 * 0:不 * 1:是
        modelFieldCategoryId: item.modelFieldCategoryId, //字段分组id
      };
      // if (item.isNotNull == false) {
      //   this.editFieldForm.isNotNull = 0; //是否必填 * 0:不 * 1:是
      // } else {
      //   this.editFieldForm.isNotNull = 1; //是否必填 * 0:不 * 1:是
      // }
      this.editFieldFormVisible = true;
    },
    //编辑字段
    EditField(formName) {
      this.$refs[formName].validate(async (valid) => {
        this.editFieldForm.length = this.editFieldForm.newFieldName.length;
        if (valid) {
          let res = await getEditModelField_Api(this.editFieldForm);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.editFieldFormVisible = false;
            this.getList();
          } else {
            this.editFieldFormVisible = false;
            this.$message.error(msg);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //删除模型字段
    delField(id) {
      this.$confirm("此操作将永久删除该字段, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await getDelModelField_Api(id);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.getList();
          } else {
            this.$message.error(msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //展示新建关系
    showAddAssociation() {
      this.newFormVisible = true;
      this.new_form.sourceModelId = this.$route.query.id;
      this.new_form.new_form = {
        sourceModelId: null, //源模型id
        destModelId: null, //目标模型id
        modelAssociationTypeId: null, //关联类型id
        remarks: "", //备注
      };
    },
    //新建关联
    addRelation(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await getAddModelAssociation_Api(this.new_form);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.getModelAssociationList();
            this.newFormVisible = false;
          } else {
            this.$message.error(msg);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //删除关联
    delRelation(index, row) {
      this.$confirm("此操作将永久取消该关联, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await getDelModelAssociation_Api(row.modelAssociationId);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.getModelAssociationList();
          } else {
            this.$message.error(msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //切换tab
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    addRules(value) {
      console.log(value);
      if (value == "DATETIME") {
        this.rules.newFieldName = [
          {
            max: 6,
            required: true,
            message: "请输入字段名称并且不能超过7位",
            trigger: "blur",
          },
        ];
      } else {
        this.rules.newFieldName = [
          { required: true, message: "请输入字段名", trigger: "blur" },
        ];
      }
    },
    //关闭弹窗
    closeDialog(formName) {
      this.$refs[formName].resetFields();
    },
  },
  components: {
    Index,
    IconSelect,
  },
};
</script>

<style lang="scss" scoped>
#model_detail {
  .data_card {
    font-size: 15px;
    width: 100%;
    height: 90px;
    background-color: #ffffff;
    margin-top: 10px;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title_name {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .icon_box {
        position: relative;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #e1ecff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 15px;

        &::after {
          content: "自定义";
          display: block;
          position: absolute;
          top: -5px;
          left: 32px;
          width: 40px;
          height: 15px;
          background-color: #dcfde2;
          font-size: 10px;
          color: #34ce5f;
          line-height: 15px;
          text-align: center;
          border-radius: 2px;
        }

        .svg-icon {
          width: 30px;
          height: 30px;
        }
      }

      .name {
        p {
          font-size: 16px;
          margin-bottom: 5px;
        }

        span {
          font-size: 14px;
          color: #ada2b1;
        }
      }
    }

    .operate {
      margin-left: 200px;

      span {
        margin-left: 15px;
        font-size: 13px;
        cursor: pointer;

        .svg-icon {
          margin-right: 5px;
        }
      }
    }
  }

  //tab布局
  .tabs {
    background-color: #ffffff;
    margin-top: 10px;
    box-sizing: border-box;
    padding: 15px;
    border-radius: 5px;
    overflow: hidden;

    .el-tabs {
      height: calc(100vh - 285px);

      ::v-deep .el-tabs__content {
        height: calc(100% - 55px) !important;
        overflow-y: scroll;
      }

      .field {
        .el-collapse {
          border: none !important;
        }

        .el-collapse-item {
          ::v-deep .el-collapse-item__wrap {
            border: none !important;
          }

          .item_box {
            width: 100%;
            box-sizing: border-box;
            padding: 2px;
            display: flex;
            justify-content: flex-start;
            align-content: flex-start;
            flex-wrap: wrap;

            .item {
              cursor: pointer;
              width: 210px;
              height: 50px;
              margin-right: 8px;
              margin-bottom: 8px;
              border-radius: 5px;
              background-color: #f4f6f9;
              border: 1px solid #dcdee5;
              box-sizing: border-box;
              padding-left: 20px;
              display: flex;
              justify-content: space-between;
              align-items: center;

              &:hover {
                border-color: #3a84ff;
                background-color: #f0f5ff;

                .icons {
                  display: block;
                }
              }

              &:last-child {
                margin: 0;
                padding: 0;
                border: 1px dashed #dcdee5;
                background-color: transparent;
                justify-content: center;
                color: #ada2b1;
                font-size: 12px;

                .svg-icon {
                  width: 11px;
                  height: 11px;
                  vertical-align: middle;
                  margin-right: 5px;
                }
              }

              .name {
                p {
                  margin: 0;
                  margin-top: 6px;
                  line-height: 10px;
                  font-size: 13px;
                  color: #737996;
                }

                span {
                  font-size: 12px;
                  color: #bfcbdf;
                }
              }

              .icons {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}

//修改背景颜色
::v-deep .el-collapse .el-collapse-item .el-collapse-item__header {
  // background-color: transparent !important;
  width: 100%;
  border: none !important;
  font-weight: bold;
  font-size: 16px;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;

  &:hover {
    background-color: #f0f1f5;
  }
}

//弹出框
.popover_box {
  text-align: center;
  cursor: pointer;
  padding: 4px 0;

  &:hover {
    background-color: #f0f1f5;
    border-radius: 5px;
  }
}

//
.cls-flex-col {
  display: flex;
  margin-bottom: 10px;
}

.cls-flex-item {
  &>div {
    width: 20%;
  }

  &>div:last-child {
    width: 20px;
  }
}

.cls-flex-row {
  display: flex;
  flex-direction: column;
  margin-right: 10px;
}

.cls-flex-100 {
  flex: 1;
}

.cls-add {
  font-size: 28px;
}
</style>
